<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>投标商平台</title>
    <link rel="icon" href="./images/gongzhenglogo.png">
    <!-- Bootstrap -->
    <link href="./css/bootstrap-4.4.1.css" rel="stylesheet">
    <!-- 引入字体图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <style>
        :root {
            --primary-color: #3f51b5;
            --secondary-color: #f5f7fa;
            --accent-color: #ff4081;
            --text-color: #333;
            --light-text: #6c757d;
            --border-radius: 8px;
            --box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }
        
        body {
            background: var(--secondary-color);
            color: var(--text-color);
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
        }
        
        .main-content {
            margin-top: 40px;
            margin-bottom: 40px;
        }
        
        .card {
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            border: none;
            margin-bottom: 25px;
            transition: transform 0.3s ease;
        }
        
        .card:hover {
            transform: translateY(-5px);
        }
        
        .card-header {
            background-color: #fff;
            border-bottom: 1px solid rgba(0,0,0,0.05);
            padding: 20px;
            border-radius: var(--border-radius) var(--border-radius) 0 0 !important;
        }
        
        .card-body {
            padding: 25px;
        }
        
        h2, h4, h5 {
            font-weight: 600;
            color: #2c3e50;
        }
        
        .section-title {
            position: relative;
            margin-bottom: 25px;
            padding-bottom: 10px;
        }
        
        .section-title:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 50px;
            height: 3px;
            background: var(--primary-color);
        }
        
        .progress {
            height: 12px;
            border-radius: 20px;
            margin-bottom: 20px;
            box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
        }
        
        .progress-bar {
            border-radius: 20px;
        }
        
        .company-info {
            background-color: #fff;
            padding: 25px;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
        }
        
        .company-info h5 {
            margin-top: 20px;
            margin-bottom: 15px;
            color: var(--primary-color);
        }
        
        .company-info ul {
            padding-left: 20px;
        }
        
        .company-info li {
            margin-bottom: 10px;
        }
        
        .jumbotron {
            background-color: #fff;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            padding: 30px;
        }
        
        .form-control {
            border-radius: var(--border-radius);
            padding: 12px 15px;
            border: 1px solid #e0e0e0;
        }
        
        .form-control:focus {
            box-shadow: 0 0 0 3px rgba(63, 81, 181, 0.2);
            border-color: var(--primary-color);
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
            border-radius: 30px;
            padding: 10px 25px;
            font-weight: 600;
            transition: all 0.3s;
        }
        
        .btn-primary:hover {
            background-color: #303f9f;
            border-color: #303f9f;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(63, 81, 181, 0.3);
        }
        
        .material-label {
            display: flex;
            align-items: center;
            margin-bottom: 5px;
            font-weight: 500;
        }
        
        .material-label i {
            margin-right: 8px;
            color: var(--primary-color);
        }
        
        footer {
            background-color: #fff;
            padding: 20px 0;
            border-radius: var(--border-radius);
            box-shadow: var(--box-shadow);
            margin-top: 40px;
        }
        
        /* 修复Bootstrap 4中的一些间距问题 */
        .mr-1 {
            margin-right: 0.25rem !important;
        }
        
        .mr-2 {
            margin-right: 0.5rem !important;
        }
        
        /* 修复Bootstrap 4中的徽章样式 */
        .badge-primary {
            background-color: var(--primary-color);
            color: white;
            padding: 0.4em 0.6em;
        }
        
        @media (max-width: 768px) {
            .main-content {
                padding: 0 10px;
            }
            
            .company-info {
                padding: 15px;
            }
        }
    </style>
</head>
<body>
    <div class="container main-content">
        <div class="row justify-content-center">
            <div class="col-lg-10 col-md-12">
                <!-- 页面标题 -->
                <div class="text-center mb-4">
                    <h1 class="display-4">投标商平台</h1>
                    <p class="lead text-muted">查看和管理您的投标项目</p>
                </div>
                
                <div class="row">
                    <!-- 左侧材料进度 -->
                    <div class="col-md-6 col-sm-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="mb-0"><i class="bi bi-bar-chart-line mr-2"></i>投标商订单信息</h4>
                                <span class="badge badge-primary">进行中</span>
                            </div>
                            <div class="card-body">
                                <p class="text-muted mb-4">各类建材采购进度统计</p>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-box-seam"></i>水泥 (85%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100" style="width: 85%"></div>
                                    </div>
                                </div>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-tools"></i>钢筋 (80%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 80%"></div>
                                    </div>
                                </div>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-layers"></i>砂石 (70%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-success" role="progressbar" aria-valuenow="70" aria-valuemin="0" aria-valuemax="100" style="width: 70%"></div>
                                    </div>
                                </div>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-tree"></i>木材 (60%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-info" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%"></div>
                                    </div>
                                </div>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-palette"></i>油漆 (55%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-warning" role="progressbar" aria-valuenow="55" aria-valuemin="0" aria-valuemax="100" style="width: 55%"></div>
                                    </div>
                                </div>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-lightning"></i>电线 (50%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
                                    </div>
                                </div>
                                
                                <div class="material-progress">
                                    <div class="material-label">
                                        <i class="bi bi-water"></i>管材 (50%)
                                    </div>
                                    <div class="progress">
                                        <div class="progress-bar bg-danger" role="progressbar" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" style="width: 50%"></div>
                                    </div>
                                </div>
                                
                                <h5 class="mt-4"><i class="bi bi-list-check mr-2"></i>供应明细</h5>
                                <ul>
                                    <li><strong>水泥</strong>：P.O 42.5级，总量500吨</li>
                                    <li><strong>钢筋</strong>：HRB400螺纹钢，总量200吨</li>
                                    <li><strong>砂石</strong>：中粗砂，总量800吨</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 右侧公司信息 -->
                    <div class="col-md-6 col-sm-12">
                        <div class="card">
                            <div class="card-header d-flex justify-content-between align-items-center">
                                <h4 class="mb-0"><i class="bi bi-building mr-2"></i>生产信息</h4>
                                <span class="text-muted">截止日期: 2025年5月6日</span>
                            </div>
                            <div class="card-body">
                                <div class="company-info">
                                    <h5 class="section-title">投标企业商信息</h5>
                                    
                                    <h5><i class="bi bi-briefcase mr-2"></i>公司概况</h5>
                                    <ul>
                                        <li><strong>公司名称</strong>：XX科技有限公司</li>
                                        <li><strong>注册资金</strong>：5000万元人民币</li>
                                        <li><strong>成立时间</strong>：2015年</li>
                                        <li><strong>主营业务</strong>：智能安防系统、信息化解决方案、软件开发与集成</li>
                                    </ul>
                                    
                                    <h5><i class="bi bi-award mr-2"></i>资质与优势</h5>
                                    <ul>
                                        <li><strong>资质证书</strong>：ISO 9001质量管理体系认证、电子与智能化工程专业承包二级资质、高新技术企业</li>
                                        <li><strong>项目经验</strong>：成功完成某市智慧交通管理系统、XX银行数据中心建设等项目，年均投标中标率超60%</li>
                                        <li><strong>优势特点</strong>：拥有30+项专利技术，提供7×24小时售后服务，合作客户包括政府机构及世界500强企业</li>
                                    </ul>
                                    
                                    <h5><i class="bi bi-person-badge mr-2"></i>联系方式</h5>
                                    <p><i class="bi bi-telephone mr-1"></i> 张经理：138-XXXX-XXXX</p>
                                    <p><i class="bi bi-envelope mr-1"></i> 邮箱：zhang@xxtech.com</p>
                                    
                                    <h5><i class="bi bi-graph-up mr-2"></i>业务数据</h5>
                                    <ul>
                                        <li>年均投标项目：50+</li>
                                        <li>客户满意度：98%</li>
                                        <li>售后响应时间：≤2小时</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 投标表单 -->
                <div class="card mt-4">
                    <div class="card-header text-center">
                        <h2 class="mb-0"><i class="bi bi-pencil-square mr-2"></i>投标信息</h2>
                    </div>
                    <div class="card-body">
                        <div class="row justify-content-center">
                            <div class="col-lg-8 col-12">
                                <form>
                                    <div class="form-group">
                                        <label for="bidPrice"><i class="bi bi-currency-yen mr-1"></i>订单量</label>
                                        <input type="number" class="form-control" id="bidPrice" name="bidPrice" placeholder="请输入您的订单交易额">
                                    </div>
                                    <div class="form-group">
                                        <label for="isCharity"><i class="bi bi-tag mr-1"></i>用途说明</label>
                                        <select class="form-control" id="isCharity" name="isCharity">
                                            <option value="公益">公益活动</option>
                                            <option value="个人收藏">个人收藏</option>
                                            <option value="其他">其他</option>
                                        </select>
                                    </div>
                                    <div class="form-group">
                                        <label for="usage"><i class="bi bi-chat-text mr-1"></i>补充说明</label>
                                        <textarea rows="5" class="form-control" id="usage" name="usage" placeholder="请描述您的具体需求或其他补充信息"></textarea>
                                    </div>
                                    <div class="text-center mt-4">
                                        <button type="submit" class="btn btn-primary btn-lg" id="submitBidBtn">
                                            <i class="bi bi-send mr-2"></i>提交投标
                                        </button>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 页脚 -->
                <footer class="text-center mt-5">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <p class="mb-0">Copyright © 招标竞拍平台 2023. All rights reserved.</p>
                            </div>
                        </div>
                    </div>
                </footer>
            </div>
        </div>
    </div>
    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.4.1/dist/js/bootstrap.min.js"></script>
    
    <script>
        document.getElementById('submitBidBtn').onclick = function(e) {
            e.preventDefault();
            alert('14工作日后会在您的邮箱提示这次招标的中标公示名单，同时您可以在您的账户查看详细信息');
        };
    </script>
</body>
</html>
